<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./static/static/vue.min.js"></script>
  <script src="./static/static/axios.min.js"></script>
  <!-- 本地引入lib-master -->
  <link rel="stylesheet" type="text/css" href="./static/lib-master/theme-chalk/index.css" />
  <script src="./static/lib-master/index.js" type="text/javascript" charset="utf-8"></script>
</head>

<body>
  <div id='app'>
    <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
      <el-form-item label="手机号" prop="tel">
        <el-input v-model.number="ruleForm.tel"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="pwd">
        <el-input type="password" v-model="ruleForm.pwd" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm">提交</el-button>
      </el-form-item>
    </el-form>
  </div>

  <script>
    new Vue({
      el: '#app',
      data() {
        var checktel = (rule, value, callback) => {
          if (!value) {
            return callback(new Error('手机号不能为空'));
          }
        };
        var validatepwd = (rule, value, callback) => {
          if (value === '') {
            callback(new Error('请输入密码'));
          } else {
            if (this.ruleForm.checkpwd !== '') {
              this.$refs.ruleForm.validateField('checkpwd');
            }
            callback();
          }
        };

        return {
          baseUrl: 'http://localhost:8888/api',
          ruleForm: {
            pwd: '',
            tel: ''
          },
          rules: {
            pwd: [
              { validator: validatepwd, trigger: 'blur' }
            ],
            tel: [
              { validator: checktel, trigger: 'blur' }
            ]
          }
        };
      },
      watch: {

      },
      created() {

      },
      //方法集合
      methods: {
        submitForm() {
          axios.get(`${this.baseUrl}/borrow/user/login?tel=${this.ruleForm.tel}&pwd=${this.ruleForm.pwd}`).then(({ data }) => {
            alert(data.msg)
            if (data.code == 0) {
              localStorage.setItem("token", data.token)
              localStorage.setItem("name", data.name)
              location = "./t3_user.html"
            }
          })
        }, register() {

        }
      }
    })
  </script>
</body>

</html>